<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>列表内容</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" type="text/css" href="css/base.css">
		<link rel="stylesheet" type="text/css" href="css/common.css">
		<link rel="stylesheet" type="text/css" href="css/pagecss/pullfresh_sub.css">
		<link rel="stylesheet" href="js/mui/css/mui.min.css">
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<style>
			.left_name,
			.right_value {
				font-size: 16px;
			}
			
			.left_name {
				float: left;
				width: 30%;
			}
			
			.right_value {
				float: right;
				width: 70%;
			}
			
			.content_line {
				line-height: 40px;
			}
			
			.details-button {
				float: right;
				margin-top: 0.4rem;
				color: #555555;
				font-size: 0.6rem;
			}
			
			.my-order-item-tit span {
				float: left;
				font-size: 0.78rem;
			}
			
			.header {
				z-index: 9999;
			}
			
			.reback-button {
				background: #1d1d21;
				height: 1.8rem;
			}
			
			.pos-r {
				font-size: 0.78rem;
			}
			
			.details-button {
				float: right;
				margin-top: 0.4rem;
				color: #555555;
				font-size: 0.6rem;
			}
		</style>
	</head>

	<body>
		<!--下拉刷新容器-->
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<!--数据列表-->
				<ul class="mui-table-view mui-table-view-chevron" id="content_body">
					<li>
						<a>
							<div class="my-order-item">
								<div class="my-order-item-tit clearfix">
									<span>商品编号：SP000001</span>

								</div>
								<div class="my-order-item-txt">
									<div class="content_line">
										<label class="left_name">仓库名称：</label>
										<label class="right_value">赛格</label>
										<div style="clear: both;"></div>
									</div>
									<div class="content_line">
										<label class="left_name">商品品牌：</label>
										<label class="right_value">苹果</label>
										<div style="clear: both;"></div>
									</div>
									<div class="content_line">
										<label class="left_name">商品名称：</label>
										<label class="right_value">iphone6spuls</label>
										<div style="clear: both;"></div>
									</div>
									<div class="content_line">
										<label class="left_name">序列号：</label>
										<label class="right_value">A8976508122903</label>
										<div style="clear: both;"></div>
									</div>
									<div class="content_line">
										<label class="left_name">数量：</label>
										<label class="right_value">1</label>
										<div style="clear: both;"></div>
									</div>
									<div class="content_line">
										<label class="left_name">成本价：</label>
										<label class="right_value">￥1,280.00</label>
										<div style="clear: both;"></div>
									</div>
									<div class="content_line">
										<label class="left_name">库存成本：</label>
										<label class="right_value">￥1,280.00</label>
										<div style="clear: both;"></div>
									</div>
								</div>
								<!--
						  <div class="my-order-item-btn">
				          
				            <div class="pos-r">
				              	应收金额：￥2,400.00
				            </div>  
							
				          </div>-->
							</div>
					</li>

				</ul>
			</div>
		</div>
		<script src="js/mui/js/mui.min.js"></script>
		<script>
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					down: {
						callback: pulldownRefresh
					},
					up: {
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				}
			});
			/**
			 * 下拉刷新具体业务实现
			 */
			function pulldownRefresh() {
				setTimeout(function() {
					$("#content_body").prepend(" <li><a> <div class=\"my-order-item\">" +
						"<div class=\"my-order-item-tit clearfix\" >" +
						"	<span>商品编号：SP000002</span>" +

						" </div>" +
						"<div class=\"my-order-item-txt\">" +
						"	<div class=\"content_line\">" +
						"		<label class=\"left_name\">仓库名称：</label>" +
						"	<label class=\"right_value\">赛格</label>" +
						"	<div style=\"clear: both;\"></div>" +
						"</div>" +
						"<div class=\"content_line\">" +
						"	<label class=\"left_name\">商品品牌：</label>" +
						"	<label class=\"right_value\">苹果</label>" +
						"	<div style=\"clear: both;\"></div>" +
						"</div>" +
						"<div class=\"content_line\">" +
						"	<label class=\"left_name\">商品名称：</label>" +
						"<label class=\"right_value\">Iphone6</label>" +
						"<div style=\"clear: both;\"></div>" +
						"</div>" +
						"<div class=\"content_line\">" +
						"		<label class=\"left_name\">序列号：</label>" +
						"	<label class=\"right_value\">A8976508122903</label>" +
						"	<div style=\"clear: both;\"></div>" +
						"	</div>" +
						"	<div class=\"content_line\">" +
						"		<label class=\"left_name\">数量：</label>" +
						"	<label class=\"right_value\">3</label>" +
						"	<div style=\"clear: both;\"></div>" +
						"</div>" +
						"	<div class=\"content_line\">" +
						"		<label class=\"left_name\">成本价：</label>" +
						"	<label class=\"right_value\">￥2,400.00</label>" +
						"	<div style=\"clear: both;\"></div>" +
						"</div>" +
						"	<div class=\"content_line\">" +
						"		<label class=\"left_name\">库存成本：</label>" +
						"	<label class=\"right_value\">￥2,400.00</label>" +
						"	<div style=\"clear: both;\"></div>" +
						"</div>" +
						"</div>" +

						"</div>");
					mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
				}, 1500);
			}
			var count = 0;
			/**
			 * 上拉加载具体业务实现
			 */
			function pullupRefresh() {
				setTimeout(function() {
					$("#content_body").append("  <div class=\"my-order-item\">" +
						"<div class=\"my-order-item-tit clearfix\" >" +
						"	<span>商品编号：SP000002</span>" +

						" </div>" +
						"<div class=\"my-order-item-txt\">" +
						"	<div class=\"content_line\">" +
						"		<label class=\"left_name\">仓库名称：</label>" +
						"	<label class=\"right_value\">赛格</label>" +
						"	<div style=\"clear: both;\"></div>" +
						"</div>" +
						"<div class=\"content_line\">" +
						"	<label class=\"left_name\">商品品牌：</label>" +
						"	<label class=\"right_value\">苹果</label>" +
						"	<div style=\"clear: both;\"></div>" +
						"</div>" +
						"<div class=\"content_line\">" +
						"	<label class=\"left_name\">商品名称：</label>" +
						"<label class=\"right_value\">Iphone6</label>" +
						"<div style=\"clear: both;\"></div>" +
						"</div>" +
						"<div class=\"content_line\">" +
						"		<label class=\"left_name\">序列号：</label>" +
						"	<label class=\"right_value\">A8976508122903</label>" +
						"	<div style=\"clear: both;\"></div>" +
						"	</div>" +
						"	<div class=\"content_line\">" +
						"		<label class=\"left_name\">数量：</label>" +
						"	<label class=\"right_value\">3</label>" +
						"	<div style=\"clear: both;\"></div>" +
						"</div>" +
						"	<div class=\"content_line\">" +
						"		<label class=\"left_name\">成本价：</label>" +
						"	<label class=\"right_value\">￥2,400.00</label>" +
						"	<div style=\"clear: both;\"></div>" +
						"</div>" +
						"	<div class=\"content_line\">" +
						"		<label class=\"left_name\">库存成本：</label>" +
						"	<label class=\"right_value\">￥2,400.00</label>" +
						"	<div style=\"clear: both;\"></div>" +
						"</div>" +
						"</div>" +

						"</div>");
					mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2));
				}, 1500);
			}
			if(mui.os.plus) {
				mui.plusReady(function() {
					setTimeout(function() {
						mui('#pullrefresh').pullRefresh().pullupLoading();
					}, 1000);
				});
			} else {
				mui.ready(function() {
					mui('#pullrefresh').pullRefresh().pullupLoading();
				});
			}

			mui('.mui-table-view').on('tap', '.my-order-item', function() {
				// 点击事件
				//location.href="sale-detail.html";
				// 暂时禁止滚动
				mui('#pullrefresh').pullRefresh().setStopped(true);
			})　　　

			mui('body').on('tap', '.mui-backdrop', function() {
				// 取消暂时禁止滚动
				mui('#pullrefresh').pullRefresh().setStopped(false);
			})
			mui('body').on('tap', '.mui-dtpicker-header', function(e) {
				var target = e.target;
				if(target.tagName === 'BUTTON') {
					// 取消暂时禁止滚动
					mui('#pullrefresh').pullRefresh().setStopped(false);
				}
			})
		</script>
	</body>

</html>